<template>
  <div class="page-wrap">
    <div class="top-info" v-if="pageInfo.length > 0">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="cli" style="background: rgba(255, 197, 12, 0.05); border-left: 4px solid rgba(255, 197, 12, 1)">
            <div class="img"><img src="@/assets/homeicon12.png" /></div>
            <div class="data">
              <span>实时班产</span><strong>{{ pageInfo[0].实时班产 || '' }}</strong>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="cli" style="background: rgba(47, 156, 19, 0.05); border-left: 4px solid rgba(47, 156, 19, 1)">
            <div class="img"><img src="@/assets/homeicon13.png" /></div>
            <div class="data">
              <span>生产效率</span><strong>{{ pageInfo[0].生产效率 }}</strong>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="cli" style="background: rgba(12, 163, 255, 1, 0.05); border-left: 4px solid rgba(12, 163, 255, 1)">
            <div class="img"><img src="@/assets/homeicon14.png" /></div>
            <div class="data">
              <span>千锭时断头</span><strong>{{ pageInfo[0].千锭时断头 }}</strong>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="cli" style="background: rgba(255, 117, 57, 0.05); border-left: 4px solid rgba(255, 117, 57, 1)">
            <div class="img"><img src="@/assets/homeicon15.png" /></div>
            <div class="data">
              <span>实时断头</span><strong>{{ pageInfo[0].实时断头 }}</strong>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="spin-status" v-if="pageInfo.length > 0">
      <div class="spin-status-inner">
        <div class="title">
          {{ pageInfo[0].班次说明1 }}<span>{{ pageInfo[0].日期1 }}</span>
        </div>
        <div class="maincontent">
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon1.png" /></div>
            <div class="data">
              <span>开纺品种</span><em>{{ pageInfo[0].开纺品种1 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon8.png" /></div>
            <div class="data">
              <span>平均支数</span><em>{{ pageInfo[0].平均支数1 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon3.png" /></div>
            <div class="data">
              <span>开机台数</span><em>{{ pageInfo[0].开机台数1 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon5.png" /></div>
            <div class="data">
              <span>不良锭子</span><em>{{ pageInfo[0].不良锭子1 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon2.png" /></div>
            <div class="data">
              <span>实时班产</span><em>{{ pageInfo[0].实时班产1 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon11.png" /></div>
            <div class="data">
              <span>生产效率</span><em>{{ pageInfo[0].生产效率1 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon9.png" /></div>
            <div class="data">
              <span><strong>实时断头</strong><strong>闲置锭</strong></span>
              <em
                ><strong>{{ pageInfo[0].实时断头1 }}</strong
                ><strong>{{ pageInfo[0].闲置锭1 }}</strong></em
              >
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon10.png" /></div>
            <div class="data">
              <span>滑锭</span><em>{{ pageInfo[0].滑锭1 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon6.png" /></div>
            <div class="data">
              <span>吨产用电</span><em>{{ pageInfo[0].吨产用电1 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon7.png" /></div>
            <div class="data">
              <span><strong>温湿度</strong></span>
              <em
                ><strong>{{ pageInfo[0].温度1 }}</strong
                ><strong>{{ pageInfo[0].湿度1 }}</strong></em
              >
            </div>
          </div>
        </div>
      </div>
      <div class="spin-status-inner gray">
        <div class="title">
          {{ pageInfo[0].班次说明2 }}<span>{{ pageInfo[0].日期2 }}</span>
        </div>
        <div class="maincontent">
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon1.png" /></div>
            <div class="data">
              <span>开纺品种</span><em>{{ pageInfo[0].开纺品种2 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon8.png" /></div>
            <div class="data">
              <span>平均支数</span><em>{{ pageInfo[0].平均支数2 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon3.png" /></div>
            <div class="data">
              <span>开机台数</span><em>{{ pageInfo[0].开机台数2 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon5.png" /></div>
            <div class="data">
              <span>不良锭子</span><em>{{ pageInfo[0].不良锭子2 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon2.png" /></div>
            <div class="data">
              <span>实时班产</span><em>{{ pageInfo[0].实时班产2 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon11.png" /></div>
            <div class="data">
              <span>生产效率</span><em>{{ pageInfo[0].生产效率2 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon9.png" /></div>
            <div class="data">
              <span><strong>实时断头</strong><strong>闲置锭</strong></span>
              <em
                ><strong>{{ pageInfo[0].实时断头2 }}</strong
                ><strong>{{ pageInfo[0].闲置锭2 }}</strong></em
              >
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon10.png" /></div>
            <div class="data">
              <span>滑锭</span><em>{{ pageInfo[0].滑锭2 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon6.png" /></div>
            <div class="data">
              <span>吨产用电</span><em>{{ pageInfo[0].吨产用电2 }}</em>
            </div>
          </div>
          <div class="cli">
            <div class="img"><img src="@/assets/homeicon7.png" /></div>
            <div class="data">
              <span><strong>温湿度</strong></span>
              <em
                ><strong>{{ pageInfo[0].温度2 }}</strong
                ><strong>{{ pageInfo[0].湿度2 }}</strong></em
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import dayjs from 'dayjs'

//console.log(BlockTitle)
export default {
  name: 'AllFactory',
  components: {},
  data() {
    return {
      pageInfo: [],
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  mounted() {
    window.dj = dayjs
    //console.log(dayjs)
  },
  methods: {
    async getData() {
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      try {
        const res = await request({
          url: '/db/getDataBySp',
          method: 'post',
          data: {
            spName: 'sp_zcsj',
            params: [
              { isnum: false, value: dayjs(this.toDate).format('YYYY-MM-DD') },
              { isnum: true, value: 50 },
            ],
            pagenum: 1,
            pagesize: 20,
          },
          // data: { sql, pagenum, pagesize },
        })
        console.log(res)
        if (res.list.length == 0) {
          loading.close()
          return
        }
        // const { pageNum, pageSize, pages, prePage, size, startRow, total } = res.obj

        this.pageInfo = res.list

        //console.log('#############pageInfo', this.pageInfo)
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.page-wrap {
  padding: 10px 20px;
  box-sizing: border-box;
}

.sub-item {
  width: 44px;
  text-align: center;
  border-right: 1px #eee solid;
  flex-shrink: 0;
}

.top-wrap {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.spin-status {
  margin-top: 10px;
  height: calc(100vh - 170px);
  display: flex;
}

.top-info {
  padding: 0 5px;

  .cli {
    box-shadow: 0 0 5px #dee;
    border: 1px solid #eee;
    padding: 10px 10px;
    border-radius: 6px;
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    text-align: center;
    color: #313131;
  }

  .img {
    width: 30%;

    img {
      margin-left: 20%;
    }
  }

  .data {
    text-align: center;
    width: 70%;
  }

  strong {
    display: block;
    position: relative;
    margin-top: 10px;
    font-size: 26px;
  }

  span {
    display: block;
    font-weight: normal;
    color: #666;
  }
}

.spin-status-inner {
  padding: 5px;
  width: 100%;

  .title {
    background: #0ca3ff;
    color: #fff;
    padding: 10px;
    font-size: 14px;

    span {
      float: right;
    }
  }

  .maincontent {
    background: #fbfbfb;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .cli {
      display: flex;
      position: relative;
      width: 50%;
      box-sizing: border-box;
      height: 100%;
      align-items: center;
      text-align: center;
      color: #313131;
      padding: 35px 0;
      border-bottom: 1px solid #eee;
    }

    .cli:last-child,
    .cli:nth-last-child(2) {
      border-bottom: none;
    }

    .img {
      width: 30%;

      img {
        width: 50%;
        margin-left: 40%;
      }
    }

    .data {
      text-align: center;
      width: 70%;
    }

    em {
      display: block;
      font-style: normal;
      position: relative;
      margin-top: 20px;
      font-size: 18px;

      strong {
        font-weight: normal;
        width: 50%;
        text-align: center;
        display: inline-block;
      }
    }

    span {
      display: block;
      font-weight: normal;
      color: #666;
      font-size: 14px;

      strong {
        font-weight: normal;
        width: 50%;
        text-align: center;
        display: inline-block;
      }
    }
  }
}

.gray {
  filter: grayscale(100%);
}
</style>
